{% extends "base.html" %}
{% block script %}
    <script type="text/javascript" src="/site_media/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
    <script type="text/javascript" src="/site_media/js/modify_cart.js"></script>
{% endblock %}
{% block stylesheet %}
    <link rel="stylesheet" type="text/css" href="/site_media/fancybox/jquery.fancybox-1.3.1.css" />
{% endblock %}
{% block content %}
    <div class="cart-info">
        <div style="float: left;"><img alt="cart" src="/site_media/images/shopping-cart-icon.jpg" width="100" height="100"/></div><div class="cart-title"><font>My Shopping Cart</font></div>
	<table id="shopping_cart" cellspacing="20" >
	    <thead>
		<tr align="center">
		    <th colspan="5">Product</th>
		    <th colspan="5">Price</th>
                    <th>Quantity</th>
                    <th colspan="2">Action</th>
		    <th class="right">Total</th>
		</tr>
	    </thead>
	    <tfoot>
		<tr>
		    <th id="cart-subtotal" colspan="15" align="right">
			Cart Subtotal: {{ cart_subtotal }}&nbsp;€
		    </th>
                </tr>
                {% if user.is_authenticated %}
                    {% if cart_items %}
                        <tr id="check-area">
                	    <th colspan="15" align="right">
			    <form method="POST" action=".">
    			    <input type="hidden" name="submit" value="Checkout" />
                            <a href="/cart/checkAddress/"><img src="/site_media/images/icon_checkout.gif" alt="Checkout" /></a>
                            </form>
                        </th>
                    {% endif %}
                {% else %}
                        <th colspan="15" align="right">
                            <a href="#login_panel" id="login_link" onclick="user_login_panel()"><img src="/site_media/images/login_button.png" alt="Login" /></a>
                            <div id="login_panel" style="display:none">
                                <p><img src="/site_media/images/logo.png" width="80" height="37" /><font>&nbsp&nbsp;Account</font></p>
                                <p>
                                    <label for="id_username">Username: </label>
                                    <input type="text" name="username" id="id_username" />
                                </p>
                                <p>
                                    <label for="id_password">Password: </label>
                                    <input type="password" name="password" id="id_password" />
                                </p>
                                <p>
                                    <a href="javascript:void(0)" id="login-button" onclick="user_login()"><img type="image" src="/site_media/images/login_button.gif" alt="Login" /></a>
                                </p>
                            </div>
                        </th>
		    </tr>
		{% endif %}
	    </tfoot>
	    <tbody>
		{% if cart_items %}
		    {% for item in cart_items %}
			<tr id="item-info-{{ item.id }}" align="center">
                            <td align="center">
                                <img src="/{{ item.image }}" />
                            </td>
			    <td colspan="4">
				<a href="/products/{{ item.product_id}}" class="cart" style="color: blue;">
				    {{ item.name }}
				</a>
			    </td>
			    <td colspan="5" align="center"><font>{{ item.price }}&nbsp;€</font></td>
			    <td>
				<form method="post" action="javascript:quantity_modify({{ item.id }});" class="cart">
				    <input type="text" name="quantity" value="{{ item.quantity }}" id="quantity_{{ item.id }}" size="2" class="quantity" maxlength="5" style="border:1px solid #999; width:30px; height:25px; margin-top:6px;" />
                                    <input type="image" src="/site_media/images/cart_add.jpg" style="width:40px; height:40px; position: absolute;"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </form>
                            </td>
			    <td>
				<form method="post" action="javascript:remove_item({{ item.id }})" class="cart">
				    <input type="image" src="/site_media/images/cart_remove.jpg" />
				</form>
			    </td>
                            <td>
                                <a href="javascript:void(0)" onclick="add_to_favourite({{item.product_id}})" style="color: blue;">Click to store</a>
                            </td>
			    <td class="table-right" id="one-item-total-{{ item.id }}" align="center">
                                <font>{{ item.total }}&nbsp;€</font>
                                <input type="hidden" value="{{item.product_id}}" id="product-id-{{item.product_id}}" />
                            </td>
			</tr>
		    {% endfor %}
		{% else %}
		    <tr>
			<td colspan="14" style="height:30px;" id="cart-empty">
			    Your cart is empty.
			</td>
		    </tr>
		{% endif %}
		</tbody>
	</table>
        <table id="favourite_products">
            <thead>
		<tr align="left">
		    <th colspan="15">My Favourite Goods</th>
		</tr>
	    </thead>
            <tbody>
                {% if user.is_authenticated %}
                    {% if favourite_products %}
                        {% for favourite_product in favourite_products %}
                            <tr align="center" id="favourite_good_{{ favourite_product.id }}">
                                <td>
                                    <img src="/{{favourite_product.image}}" />
                                </td>
                                <td>
                                    <a href="/products/{{ favourite_product.product_id }}" class="cart" style="color: blue;">
                                        {{ favourite_product.name }}
                                    </a>
                                <td>
                                <td>
                                    <font>{{favourite_product.price}}&nbsp;€</font>
                                </td>
                                <td>
                                    <span>{{favourite_product.added}}</span>
                                </td>
                                <td>
                                    <p><a href="javascript:void(0)" onclick="favourite_to_cart({{favourite_product.product_id}})">Add to Cart</a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;<a href="javascript:void(0)" onclick="remove_from_favourite({{favourite_product.id}})">Remove</a></p>
                                </td>
                                <td>
                                    <input type="hidden" id="product_id_{{favourite_product.product_id}}" value="{{favourite_product.product_id}}" />
                                </td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                {% else %}
                    <tr>
                        <td>
                            You must login to check your favourite goods.
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
{% endblock %}